![【Mixture】シンプルで多機能な開発ツール。](https://devio2023-media.developers.io/wp-content/uploads/2013/04/mixture.png)
【Mixture】シンプルで多機能な開発ツール。
先日、リリースされた開発ツールMixtureをご紹介します。
今回は、Mixtureのインストールから動作確認まで行ってみたいと思います。
アジェンダ
- Mixtureとは?
- インストール
- セットアップ
- 使用方法
- まとめ
Mixtureとは?
A rapid prototyping and static site generation tool for designers and developers
Mixtureは、プロトタイプ用サイトや静的なサイトを出力してくれる、画面操作(以下:GUI)ベースのサイトジェネレータツールです。
以前の記事で、機能が似ているMiddlemanをご紹介しました。 こちらは、CUI(コマンドライン)で操作するツールだったので、デザイナーの方には少しハードルが高かったのですが、MixtureはGUI操作なので、気軽に使えるかと思います。
インストール
Mixture
上記の、Mixturesオフィシャルサイトからインストール用ファイルをダウンロードしてきます。
まずは、ダウンロード
トップページ、右上のDOWNLOADボタンをクリック
使える環境
現在Mixtureは、二つの環境で使用することが可能です。
- OS: Windows (7以上)
- OS: Mac (v10.7以上)
インストール
ダウロードしたファイルを、インストールします。
Mixtureのユーザー登録
インストールが完了したら、Mixtureを起動するとユーザー登録がでてくるので登録します。ここのID・PSでログイン等するのでお忘れないようにメモしてください。
管理画面
ユーザー登録したら、管理画面に移動します。ここの画面から色々と操作していきます。
使用方法
早速いじってみたいと思います、まず適当なところにプロジェクト用空のフォルダを作成します。
今回は、デモということでデスクトップにsampleフォルダを作成しました。
1.プロジェクトフォルダを指定
管理画面の左下の「Open」ボタンをクリックし、プロジェクトフォルダを選択します。
2.テンプレートを指定
プロジェクトフォルダを指定すると、管理画面の水色の部分に以下のプロジェクトフォルダ名が表示されています。
Select a boileplate for "プロジェクトファイル名"
テンプレートを選択
Mixtureでは、様々なテンプレート用データが用意されています。
今回は、日頃お世話になっているBootStrapを使ってみます。
(自分専用のテンプレート用ファイルも作成できるみたいなので、チャレンジしてみてください。)
それでは、Popularメニュー > BootStrapをクリックします。
3.プロジェクト用管理画面
テンプレートを選択したら、プロジェクト用管理画面に移動します。
先ほど作った、sampleフォルダ内を確認するとテンプレートファイルが出力されたのが確認できます。
詳細設定用ファイル(mixture.json)
出力されたテンプレートファイルに、mixture.jsonファイルが確認できます。これは、このプロジェクトファイルでの細かな設定内容をこちらに記述する、コンフィグファイルになります。
mixture.json
{ "debug": false, "lintScripts": false, "preprocessorLocations": "public", "preprocessorScriptOutput": "public/js", "preprocessorStyleOutput": "public/css", "projectName": "sample", "projectDescription": "Sleek, intuitive, and powerful front-end framework for faster and easier web development.", "publishedId": null, "serverHostname": null, "serverPort": null, "templateDirectory": "templates", "templateDefaultLayout": "layout", "templateDefaultPage": "index", "type": "mixture", "useCompass": false, "simpleModePartnerServer": null, "modelSource": null, "domain": null }
サイト動作確認
それでは動作確認してみたいと思います、「View Locally」ボタンをクリックすると、ブラウザが自動で立ち上がり、Mixture側で付与されるアドレスで確認することができます。
http://xxx.xxx.x.xxx:7774
Bootstrapの画面が確認できれば成功です。
おまけ
MixtureはLivereload機能も実装されており、プロジェクトファイル内のファイルを更新を検知して、リロードが走ります。
まとめ
GUIのサイトジェネレータツールMixtureをご紹介しました。
ツールのレイアウトはシンプルな作りで使いやかったです。シンプルなのですが多機能でまだすべて把握できていません。。。
次回は、実際にテンプレートファイルを操作していきたいと思います。